import React, { Component } from 'react'
import { Steps, } from 'antd-mobile'
import { NavBar, Icon, Image, Button as ButtonMK } from 'components'
import moment from 'moment'
import 'moment-timezone'
import { msg, post, showPhone } from '../../../utils'
const Step = Steps.Step

export default class ServiceListHandle extends Component<any, any> {

    public static defaultProps = {
        serverListStatus: '',
        serverListid: '',
        shenheTime: '',
        kuaidiTime: ''
    }

    public state: any = {
        data: {}
    }

    public steps = [
        {
            title: '提交申请'
        },
        {
            title: '卖家审核'
        },
        {
            title: '等待发货'
        },
        {
            title: '卖家收货'
        },
        {
            title: '完成'
        },
    ]

    private shenheTime: any

    private current: number = 0

    public render(): JSX.Element {
        const { data, shenheTime, kuaidiTime } = this.state
        return (
            <div className="serviceListHandle">
                <NavBar
                    fixed={true}
                    title={<div className="returnpolicy_NavTitle">服务单详情</div>}
                />
                <div className="serviceListHandle_provideInfo serviceListHandle_pd">
                    本次售后服务由<span>{data.seller_name && data.seller_name.name}</span>为您提供
                </div>
                <div className="serviceListHandle_processTop">
                    <img src={require('../../../assets/ServiceListApproval_bg.png')} />
                    <div className="serviceListHandle_processTop_stepWrap">
                        <div className="serviceListHandle_processTop_status">
                            {this.getStatusLabel()}
                        </div>
                        <div className="serviceListHandle_processTop_process">
                            <Steps direction="horizontal" size="small" current={this.current}>
                                {
                                    this.steps.map((item, index) => {
                                        return (
                                            <Step
                                                key={index}
                                                title={(index !== 0)
                                                    ? <div className="serviceListHandle_processTop_process_item">{item.title}</div>
                                                    : item.title}
                                                icon={<Icon type="tick_circle" />}
                                            />
                                        )
                                    })
                                }
                            </Steps>
                        </div>
                    </div>
                </div>
                {data.status === 0 && <div className="serviceListHandle_infoCardWrap">
                    <div className="serviceListHandle_infoCard">
                        <div onClick={() => { this.gotoUrl('/My/Invoice/1') }}>
                            <p>请等待卖家审核，如两天内没处理自动同意</p>
                            <p>剩余时间<span>{shenheTime}</span></p>
                        </div>
                        <div>
                            <Icon type="arrow_right" />
                        </div>
                    </div>
                </div>}
                {data.status === 1 && <div className="serviceListHandle_infoCardWrap">
                    <div className="serviceListHandle_infoCard">
                        <div onClick={() => { this.gotoUrl('/My/Invoice/1') }}>
                            <p>请您尽快发货并填写运单号，如未及时填写</p>
                            <p>服务将在<span>{kuaidiTime}</span>后关闭</p>
                        </div>
                        <div>
                            <Icon type="arrow_right" />
                        </div>
                    </div>
                </div>}
                <div className="serviceListHandle_goodsReturnInfo">
                    <div className="serviceListHandle_goodsReturnInfo_title">商品回寄信息</div>
                    <div className="flex serviceListHandle_goodsReturnInfo_item">
                        <div>寄回地址：</div>
                        <div className="flex_1 serviceListHandle_goodsReturnInfo_address">{data.kdaddress}</div>
                    </div>
                    <div className="flex serviceListHandle_goodsReturnInfo_item">
                        <div>收件人：</div>
                        <div className="flex_1 serviceListHandle_goodsReturnInfo_address">{data.kdname}</div>
                    </div>
                    <div className="flex serviceListHandle_goodsReturnInfo_item" style={{ paddingBottom: '0.8rem' }}>
                        <div>联系电话：</div>
                        <div className="flex_1 serviceListHandle_goodsReturnInfo_address">{data.seller_name && data.seller_name.tel}</div>
                    </div>
                </div>
                <div className="serviceListHandle_goodsReturnInfo">
                    <div className="serviceListHandle_goodsReturnInfo_title">售后服务单信息</div>
                    <div className="serviceListHandle_goodsReturnOrder">
                        <div style={{ paddingBottom: '0.7rem', borderBottom: '0.05rem solid #f0f0f0' }}>
                            <div>
                                <Image src={data.order_goods && data.order_goods.pic} />
                            </div>
                            <div>
                                <p>{data.order_goods && data.order_goods.short_title}</p>
                                <p>单价：<span className="DINPro">￥{data.order_goods && data.order_goods.price}</span>数量：<span className="DINPro">{data.order_goods && data.order_goods.number}</span></p>
                            </div>
                        </div>
                    </div>
                    <div style={{ padding: '0 0.7rem' }}>
                        <div className="flex serviceListHandle_goodsReturnOrder_item">
                            <div>服务单号：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">{data.order_no}</div>
                        </div>
                        <div className="flex serviceListHandle_goodsReturnOrder_item">
                            <div>申请时间：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">{data.create_time}</div>
                        </div>
                        <div className="flex serviceListHandle_goodsReturnOrder_item">
                            <div>服务类型：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">{this.getTypeLable()}</div>
                        </div>
                        <div className="flex serviceListHandle_goodsReturnOrder_item" style={{ paddingBottom: '1rem', borderBottom: '0.05rem solid #f3f3f3' }}>
                            <div>申请原因：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">{data.reason}</div>
                        </div>
                        <div className="flex serviceListHandle_goodsReturnOrder_item" style={{ paddingBottom: '1rem', borderBottom: '0.05rem solid #f3f3f3' }}>
                            <div>退款方式：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">原返</div>
                        </div>
                        <div className="flex serviceListHandle_goodsReturnOrder_item" style={{ paddingBottom: '1rem', borderBottom: '0.05rem solid #f3f3f3' }}>
                            <div>商品退回：</div>
                            <div className="flex_1 serviceListHandle_goodsReturnOrder_value">快递至第三方卖家</div>
                        </div>
                    </div>
                    <div className="flex serviceListHandle_goodsReturnInfo_item">
                        <div>联系人：</div>
                        <div className="flex_1 serviceListHandle_goodsReturnInfo_address">{data.shop_user_info && data.shop_user_info.real_name}</div>
                    </div>
                    <div className="flex serviceListHandle_goodsReturnInfo_item" style={{ paddingBottom: '0.9rem' }}>
                        <div>联系电话：</div>
                        <div className="flex_1 serviceListHandle_goodsReturnInfo_address">{data.shop_user_info && showPhone(data.shop_user_info.phone)}</div>
                    </div>
                </div>
                <div className="serviceListHandle_operation_placeholder">
                    <div className="serviceListHandle_operation">
                        <div>
                            <div>
                                <Icon type="customer" />
                                <span>客服</span>
                            </div>
                        </div>
                        <div>
                            {data.status === 0 && <ButtonMK
                                className="serviceListHandle_operation_cancel"
                                onClick={this.handleCancelApply}
                            >
                                取消申请
                            </ButtonMK>}
                            {data.status === 1 && <ButtonMK
                                className="serviceListHandle_operation_writebtn"
                                onClick={() => {
                                    const { SET_USER_RETURN_DETAIL } = this.props
                                    SET_USER_RETURN_DETAIL(data)
                                    this.gotoUrl('/My/Invoice/1')
                                }}
                            >
                                填写发货单
                            </ButtonMK>}
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    public componentWillUnmount() {
        clearInterval(this.shenheTime)
    }

    private getStatusLabel = () => {
        const { data } = this.state
        switch (data.status) {
            case 0: return '等待审核'
            case 1: return '请您发货'
            case 2: return '等待第三方收货'
            case 3: return '已取消'
            case 4: return '已关闭'
            case 5: return '已完成'
            default: return ''
        }
    }

    private getData = () => {
        const { match, userInfo } = this.props
        post('orderapi/orderRefundDetail', {
            id: match.params.id,
            userId: userInfo.id
        }).then((data: any) => {
            switch (data.status) {
                case 0: this.current = 0; break
                case 1: this.current = 1; break
                case 2: this.current = 2; break
                case 3: this.current = 5; break
                case 4: this.current = 5; break
                case 5: this.current = 5; break
                default: this.current = 0
            }
            this.setState(
                {
                    data
                },
                () => {
                    if (data.status === 0) {
                        this.timerLine()
                    }
                    if (data.status === 1) {
                        this.timerHLine()
                    }
                }
            )
        })
    }

    private timerLine = () => {
        const { data } = this.state
        let time: any = moment()
        const nextTime: any = moment(data.create_time, 'YYYY-MM-DD HH:mm:ss').add(48, 'h')
        let val = moment.tz(nextTime - time, 'Africa/Abidjan').format('HH小时mm分钟ss秒')
        this.setState({
            shenheTime: val
        })
        this.shenheTime = window.setInterval(
            () => {
                time = moment()
                val = moment.tz(nextTime - time, 'Africa/Abidjan').format('HH小时mm分钟ss秒')
                this.setState({
                    shenheTime: val
                })
            },
            1000
        )
    }

    private timerHLine = () => {
        const { data } = this.state
        let time: any = moment()
        const nextTime: any = moment(data.update_time, 'YYYY-MM-DD HH:mm:ss').add(168, 'h')
        let val = moment.tz(nextTime - time, 'Africa/Abidjan').format('HH小时mm分钟ss秒')
        this.setState({
            shenheTime: val
        })
        this.shenheTime = window.setInterval(
            () => {
                time = moment()
                val = moment.tz(nextTime - time, 'Africa/Abidjan').format('HH小时mm分钟ss秒')
                this.setState({
                    shenheTime: val
                })
            },
            1000
        )
    }

    private getTypeLable = () => {
        const { data } = this.state
        switch (data.type) {
            case 1: return '退货'
            case 2: return '换货'
            default: return ''
        }
    }

    private handleCancelApply = () => {
        const { userInfo, match } = this.props
        msg('确定要取消申请？').then(() => {
            post('orderapi/orderRefundCancal', {
                userId: userInfo.id,
                id: match.params.id
            }).then(() => {
                const data: any = { ...this.state.data }
                data.status = 3
                this.setState({
                    data
                })
            })
        })
    }

    private gotoUrl = (url: string) => {
        this.props.history.push(url)
    }

}